<template>
	<view class="my-settle-container">
		<!-- 全选 -->
		<label class="radio" @click="changeAllState">
			<radio color="#c00000" :checked="isFullCheck" /><text>全选</text>
		</label>
		
		<!-- 合计 -->
		<view class="amount-box">
			合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
		</view>
		
		
		<!-- 结算 -->
		<view class="btn-settle" @click="settlement">结算{{checkedCount}}</view>
	</view>
</template>

<script>
import {mapGetters , mapMutations ,mapState} from "vuex"
	
export default {
	data () {
		return {
			// 倒计时的秒数
			seconds:3,
			// 定时器的id
			timer:null
		};
	},
	computed:{
		...mapGetters('m_cart' , ['checkedCount','total','checkedGoodsAmount']),
		...mapGetters("m_user",['addstr']),
		...mapState("m_user",['token']),
		...mapState("m_cart",['cart']),
		// 是否全选
		isFullCheck(){
			return this.total === this.checkedCount
		}
	},
	methods:{
		// 用 mapMutations 辅助函数，把 m_cart 模块提供的 updateAllGoodsState 方法映射到当前组件中使用
		...mapMutations("m_cart", ['updateAllGoodsState']),
		...mapMutations("m_user",['updateRedirectInfo']),
		
		changeAllState(){
		// 修改购物车中所有商品的选中状态
		// !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
		this.updateAllGoodsState(!this.isFullCheck)
		},
		// 用户点击了结算按钮
		settlement(){
			// 判断是否有勾选商品
			if(!this.checkedCount) return uni.$showMsg("请选择要结算的商品")
			// 判断是否填写了地址
			if(!this.addstr) return uni.$showMsg("请填写地址")
			// 判断是否有登录
			// if(!this.token) return uni.$showMsg("请先登录")
			if(!this.token) return this.delayNavigate()
			
			this.payOrder()
		},
		async payOrder(){
			// 创建订单
			// 组织订单的信息对象
			const orderInfo ={
				// order_price :this.checkedGoodsAmount,
				order_price:0.01,
				consignee_addr:this.addstr,
				goods:this.cart.filter(x =>x.goods_state).map(x =>({
					goods_id : x.goods_id,
					goods_number : x.goods_count,
					goods_price : x.goods_price
				}))
			}
			// 发起请求创建订单
			const {data:res} = await uni.$http.post("/api/public/v1/my/orders/create",orderInfo)
			if(res.meta.status !==200) return uni.$showMsg('创建订单失败')
			// 得到服务器响应,获得订单编号
			const orderNumber = res.message.order_number
			
			// 订单预支付
			// 发起请求获取订单的支付信息
			const {data:res2} =await uni.$http.post("/api/public/v1/my/order/req_unifiedorder",{order_number:orderNumber})
			// 预付订单生成失败\
			if(res2.meta.status !==200) return uni.$showMsg('预付订单生成失败')
			// 得到订单支付相关的必要参数
			const payInfo = res2.message.pay
			
			 // 3. 发起微信支付
			// 3.1 调用 uni.requestPayment() 发起微信支付
			const [err, succ] = await uni.requestPayment(payInfo)
			// 3.2 未完成支付
			if (err) return uni.$showMsg('订单未支付！')
			// 3.3 完成了支付，进一步查询支付的结果
			const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
			// 3.4 检测到订单未支付
			if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
			// 3.5 检测到订单支付完成
			uni.showToast({
			    title: '支付完成！',
			    icon: 'success'
			   })
			
		},
		// 延迟导航到my页面
		delayNavigate(){
			this.seconds = 3
			
			this.showTips(this.seconds)
			
			this.timer = setInterval(()=>{
				this.seconds--
				
				if(this.seconds <=0){
					clearInterval(this.timer)
					
					uni.switchTab({
						url:'/pages/my/my',
						success: () => {
							this.updateRedirectInfo({
								openType :'switchTab',
								from:'/pages/cart/cart'
							})
						}
					})
					
					return
				}
				
				this.showTips(this.seconds)
			},1000)
		},
		// 展示倒计时的结算信息
		showTips(n){
			uni.showToast({
				icon:"none",
				title:"请登陆后再结算" +n+ "秒后自动跳转到登录页",
				// 防止点击穿透
				mask:true,
				duration:1500
			})
		}
	}
}
</script>

<style lang="scss">
.my-settle-container{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: white;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	align-items: center;
	
	.radio{
		display: flex;
		align-items: center;
	}
	
	.amount-box{
		.amount{
			color: skyblue;
			font-weight: bold;
		}
	}
	
	.btn-settle{
		background-color: skyblue;
		height: 50px;
		line-height: 50px;
		color: white;
		padding: 0 10px;
		min-width: 100px;
	}
}
</style>
